<template>
	<div class="login-container">

		<uni-popup ref="message" type="message" class="login-message">
			<uni-popup-message :type="msgType" :message="messageText" :duration="1000" border-radius="100px"
				class="login-message"></uni-popup-message>
		</uni-popup>

		<div class="text">登录</div>


		<uni-forms ref="loginForm" :modelValue="ruleForm" label-width="0">
			<uni-forms-item label="" style="margin:2vh 5vw;">
				<input class="login-input" v-model="ruleForm.uname" placeholder="请输入用户名" />
			</uni-forms-item>
			<uni-forms-item label="" style="margin:2vh 5vw;;">
				<input class="login-input" type="password" v-model="ruleForm.password" placeholder="请输入密码" />
			</uni-forms-item>
		</uni-forms>

		<div class="btnGroup">
			<div style="margin:10vh 5vw 0 30vw;color: white;width:50vw;font-size: 30rpx;" class="login-tips"
				@click="goRegister()">没有账号？注册一个</div>

			<image @click="submitForm('loginForm')" :src="isPasswordValid ? validImageSrc : invalidImageSrc" mode="">

			</image>

		</div>


	</div>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				validImageSrc: '../../static/chishenme/login-removebg-preview.png',
				invalidImageSrc: '../../static/chishenme/unable-login.png',
				type: 'center',
				msgType: 'success',
				messageText: '这是一条成功提示',
				ruleForm: {
					uname: "",
					password: "",
				},
			};
		},
		computed: {
			isPasswordValid() {
				const passwordLength = this.ruleForm.password.length;
				return passwordLength >= 6 && passwordLength <= 20;
			}
		},
		methods: {
			onLoad() {
				const userInfo = uni.getStorageSync('userInfo');
				if (userInfo) {
					uni.switchTab({
						url: '../index/index'
					})
				}
			},
			submitForm(formName) {
				if (this.isPasswordValid) {
					const formData = {
						userName: this.ruleForm.uname,
						password: this.ruleForm.password,
					};
					if (formData.userName === '' || formData.password === '') {
						this.popMessage("error", "请输入账号密码");
						return
					}

					// 发送登录请求

					uni.showLoading({})

					uni.request({
							url: 'http://localhost:8080/user/login',
							method: 'POST',
							data: formData,
						})
						.then(response => {
							console.log(response)
							if (response[1].data.msg == "用户名或密码错误") {

								this.popMessage("error", "用户名或密码错误");
								return;
							}
							uni.setStorageSync('userInfo', response[1].data);
							this.popMessage("success", "登录成功");
							uni.removeStorageSync('dishHistory');
							uni.switchTab({
								url: '../index/index'
							});
						})
						.catch(error => {
							console.error(error);
							this.popMessage("error", "网络错误");
						})
						.finally(() => {
							uni.hideLoading();
						});

				}
				else{
					this.popMessage("warning", "密码长度应在6~20字符");
				}
			},
			goRegister() {
				uni.navigateTo({
					url: '../register/register'
				})
			},
			popMessage(type, text) {
				this.msgType = type
				this.messageText = text
				this.$refs.message.open()
			},
			goBack() {
				this.$router.go(-1);
			},
		},
	};
</script>

<style lang="scss">
	.login-container {
		background: linear-gradient(to bottom, #F9988F, #DDE97A);
		height: 100vh;
	}

	.text {
		color: white;
		font-size: 6vh;
		padding-top: 40%;
		margin-bottom: 5vh;
		margin-left: 5vw;
	}

	.login-from {
		margin: auto auto;
		font-weight: bold;
		font-size: 2vh;
	}

	.btnGroup {
		display: flex;
		justify-content: space-between;
		margin-right: 3vw;

		image {
			height: 25vw;
			width: 33vw;
		}
	}

	.login-message {
		border-radius: 30px;
		margin: 3vh 3vw 0 3vw;
		overflow: hidden;
	}

	.login-input {
		border-radius: 50px;
		border: 2px solid #E5E5E5;
		height: 5vh;
		box-sizing: border-box;
		text-align: left;
		padding-left: 3vw;
	}

	.login-tips {
		margin: 9vh 0 0 30vw;
		color: aqua;
		width: 50vw;
	}
</style>